<template>
	<view>
		<view v-for="(item,index) in waybill_list" :key="item.docid" class="truck_item" @click="onScanLoad(item,'1')">
			<view class="div_item">
				<view>货物<span>{{item.goodsname}}</span></view>
				<view>数量<span>{{item.goodsquantity}}</span></view>
			</view>
			<view class="div_item">
				<!-- <view>发往<span>{{item.addrxhd.nodeName || '--'}}</span></view> -->
				<view>卸货点 <span>{{item.addrxhd.nodeName || '--'}}</span></view>
			</view>
			<view class="div_item">
				<view>发货人<span>{{item.sendername}}</span></view>
				<view>电话<span>{{item.sendertel}}</span></view>
			</view>
			<view class="div_item">
				<view>收货人<span>{{item.receivername}}</span></view>
				<view>电话<span>{{item.receivertel}}</span></view>
			</view>

			<!-- 底部操作菜单 -->
			<view class="op_menu_div">
				<view class="btn_share" @click.stop="onQrCode(item)">收款码</view>
			</view>

		</view>

		<view v-if="!waybill_list || waybill_list.length <= 0"
			style="width: 100vw;height: 80vh;text-align: center;margin: 38vh 0 0 0;">
			暂无数据~
		</view>

		<!-- 测试二维码收款弹窗 -->
		<view>
			<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" :is-mask-click="false">
				<view class="pop_div">
					<view class="pop_div_1">
						请 支 付 运 费
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
					</view>

					<view class="pop_div_2">
						<view class="pop_div_2_1">
							<view> </view>
							<view class="pop_div_2_1_hint">付款后请耐心等待结果</view>
							<view class="btn_refresh_qrcode" @click="onRefreshQrCode">刷新收款码</view>
						</view>
						<view>
							<image class="img_qrcode" mode="aspectFit" :src="qrdata"></image>
						</view>
						<view class="pop_div_2_1">
							<view> </view>
							<view class="pop_div_2_1_hint">{{ccb_success}}</view>
							<view class="btn_refresh_qrcode" @click="onRefreshState">刷新状态</view>
						</view>
					</view>

					<view class="pop_div_3">
						<view style="width: 100%;height: 1px;background-color: rgba(1, 1, 1, 0.15);"></view>
						<view @click="onClosePop">关闭</view>
					</view>
				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import { tsToDateAndTime } from '@/util/util.js'
	export default {
		data() {
			return {
				truck: {}, // 传过来的车次(司机确认的分享)信息
				waybill_list: [], // 传过来的运单列表
				curr_wb: {}, // 记录当前操作的运单
				qrdata: '', // 收款二维码
				ccb_success: '等待支付..', // 交易状态文案
				transactionid: '', // 交易keyid 轮询查询时使用
				interval: 0, // 记录轮询的定时器id
			}
		},

		onLoad(opt) {
			this.truck = JSON.parse(opt.truck)
			this.waybill_list = this.truck.waybill.map(item => {
				item.addrlhd = JSON.parse(item.addrlhd)
				item.addrxhd = JSON.parse(item.addrxhd)
				return item
			})
			console.log('运单列表收到的this.waybill_list = ', this.waybill_list);
		},

		methods: {

			// 收款码
			onQrCode(item) {
				this.curr_wb = item

				this.getCcbQrcode()

				// 测试生成建行收款二维码 $genCCBQrCode
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},

			onClosePop() {
				this.ccb_success = '等待支付..'
				this.$refs.popup.close()
				clearInterval(this.interval)
			},

			onRefreshQrCode() {
				clearInterval(this.interval)
				this.getCcbQrcode()
			},

			onRefreshState() {
				this.getCcbStatus()
			},

			// 获取建行支付二维码
			async getCcbQrcode() {
				let that = this
				// let uinfo = this.$getUserInfo()
				that.interval = setInterval(() => {
					this.getCcbStatus() // 轮询交易状态
				}, 6000)
				let res = await this.$rqt.genCCBQrCode({
					memberid: that.truck.tms_company_id,
					// memberid: '200002',
					waybillid: that.curr_wb.docid,
					waybillno: that.curr_wb.waybill_sn,
					// waybillid: new Date().getTime(),
					// waybillno: 'PDA' + tsToDateAndTime(new Date(), '', '', ''),
					freight: that.curr_wb.all_amount,
					dskamount: '0',
					dataSource: 4, // 1 电脑 3 开票机 4 手持设备
					datamodule: 2, // 1 开单 2 出库
					datatype: 'CCB', // CCB 建设银行
					imagetype: 'base64', // base64 返回ase64二维码图形，其他 返回 Url
				})
				console.log('getCcbQrcode.res =', res);
				if (res.statuscode == 200) {
					this.qrdata = res.qrdata
					this.transactionid = res.transactionid
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 建行交易查询
			async getCcbStatus() {
				let that = this
				if (!that.transactionid) return
				let res = await this.$rqt.post_ccb_status({
					memberid: that.truck.tms_company_id,
					transactionid: that.transactionid
				})
				console.log('getCcbStatus.res = ', res);
				if (res.statuscode == 200) {
					that.ccb_success = res.ccb_success
					if ('成功' == res.ccb_success) { // 交易状态: 正在交易 成功 失败 未知
						that.autopickup() // 同步全球通运单状态
						that.onClosePop() // 关闭收款弹窗
						uni.$emit('onPaySuccess', {})
						uni.showModal({
							title: '提示',
							content: '收款成功',
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.navigateBack()
								}
							}
						})
					}
				}
			},

			// 大车直送扫码出库 同步全球通运单状态
			async autopickup() {
				let that = this
				if (!that.transactionid) return
				let res = await this.$rqt.post_autopickup({
					memberid: that.truck.tms_company_id,
					accountid: that.truck.user.user_tms_id,
					transactionid: that.transactionid
				})
				console.log('autopickup.res = ', res);
				if (res.statuscode == 200) {

				}
			}

		}
	}
</script>

<style scoped>
	.truck_item {
		margin: 20rpx;
		border: solid 1rpx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
	}

	.div_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 14rpx 14rpx 0 14rpx;
		font-size: 28rpx;
	}

	span {
		/* display: block; */
		margin: 0 0 0 10rpx;
		color: #1890FF;
		font-size: 26rpx;
	}

	.op_menu_div {
		display: flex;
		justify-content: flex-end;
		padding: 14rpx;
	}

	.btn_share {
		background-color: #1890FF;
		width: 118rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		font-size: 24rpx;
		color: white;
		border-radius: 4rpx;
		margin: 0 0 0 12rpx;
	}

	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		width: 75vw;
		height: 62vh;
		background-color: white;
		border-radius: 20rpx;
	}

	.pop_div_1 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}

	.pop_div_2 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		justify-content: space-between;
		height: 100%;
		width: 100%;
		padding: 20rpx 0 20rpx 0;
	}

	.pop_div_2_1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.pop_div_2_1_hint {
		font-size: 26rpx;
		color: rgba(0, 0, 0, 0.55);
		text-align: center;
	}

	.btn_refresh_qrcode {
		width: 140rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #1890FF;
		color: white;
		font-size: 22rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.img_qrcode {
		width: 380rpx;
		height: 380rpx;
		border: solid 1rpx rgba(1, 1, 1, 0);
	}

	.pop_div_3 {
		width: 100%;
		line-height: 84rpx;
		text-align: center;
		font-weight: bold;
	}
</style>